<template>
  <body>
    <div class="header">
      <div class="mainwarp">
        <div class="logo">
          <a href="index.html"><img src="@/assets/images/log.png" /></a>
        </div>
        <div class="welcome">欢迎注册</div>
        <div class="headerright">
          <router-link to="/Home">返回首页</router-link>
        </div>
      </div>
    </div>
    <div class="zhuceBox">
      <div class="zcLeft">
        <ul id="tabzc">
          <li @click="changeToPhone">手机号注册</li>
          <li @click="changeToEmail">邮箱注册</li>
          <div class="clear"></div>
        </ul>
        <div class="clear"></div>
        <div id="contentzc">
          <ul style="display: block">
            <div class="zcpart0">
              <br /><br />
              <div v-if="isPhone">
                <el-form
                  :model="userByPhone"
                  :rules="rules"
                  ref="userByPhone"
                  style="width: 330px"
                >
                  <el-form-item label="手机号" prop="phone" label-width="80px">
                    <el-input
                      type="text"
                      v-model="userByPhone.phone"
                      placeholder="请输入手机号"
                    />
                  </el-form-item>

                  <el-form-item label="昵称" prop="nickname" label-width="80px">
                    <el-input
                      type="text"
                      v-model="userByPhone.nickname"
                      placeholder="请输入昵称"
                    />
                  </el-form-item>

                  <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input
                      type="password"
                      v-model="userByPhone.password"
                      placeholder="请输入密码"
                    />
                  </el-form-item>
                  <el-form-item
                    label="确认密码"
                    prop="pwdPhone"
                    label-width="80px"
                  >
                    <el-input
                      type="password"
                      v-model="pwdPhone"
                      placeholder="请输入确认密码"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div v-else>
                <el-form
                  :model="userByEmail"
                  :rules="rules"
                  ref="userByEmail"
                  style="width: 330px"
                >
                  <el-form-item label="邮箱" prop="email" label-width="80px">
                    <el-input
                      type="text"
                      v-model="userByEmail.email"
                      placeholder="请输入邮箱"
                    />
                  </el-form-item>
                  <el-form-item label="昵称" prop="nickname" label-width="80px">
                    <el-input
                      type="text"
                      v-model="userByEmail.nickname"
                      placeholder="请输入昵称"
                    />
                  </el-form-item>
                  <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input
                      type="password"
                      v-model="userByEmail.password"
                      placeholder="请输入密码"
                    />
                  </el-form-item>
                  <el-form-item
                    label="确认密码"
                    prop="pwdEmail"
                    label-width="80px"
                  >
                    <el-input
                      type="password"
                      v-model="pwdEmail"
                      placeholder="请输入确认密码"
                    />
                  </el-form-item>
                </el-form>
              </div>
              <div class="checkbox-container">
                <el-checkbox
                  v-model="checked5"
                  label="我已阅读并接受"
                  size="small"
                  class="custom-checkbox"
                ></el-checkbox>
                <router-link to="/agreement" class="user-agreement"
                  >用户协议</router-link
                >
              </div>
              <div class="clear"></div>
              <div class="zcpart8">
                <a
                  href="javascript:;"
                  @click="submitCheck"
                  :disabled="isDisabled"
                  >注 册</a
                >
              </div>
            </div>
          </ul>
        </div>
      </div>
      <div class="zcRight">
        <div class="topdiv">
          <span class="noPa">已有账号了？</span><br />

          <router-link to="/login">立即登录</router-link>
        </div>
      </div>
    </div>
    <div class="clear"></div>
  </body>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
import { ElNotification } from "element-plus";
import { register } from "@/api/user";
export default {
  name: "Register",
  data() {
    return {
      pwdPhone: "",
      pwdEmail: "",

      userByPhone: {
        username: "",
        nickname: "",
        phone: "",
        password: "",
      },
      userByEmail: {
        username: "",
        nickname: "",
        email: "",
        password: "",
      },
      rules: {
        phone: [
          {
            required: true,
            message: "电话不能为空",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "电话必须为11位 ",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "邮箱不能为空",
            trigger: "blur",
          },
          {
            min: 6,
            max: 16,
            message: "邮箱必须在6到16位 ",
            trigger: "blur",
          },
        ],
        nickname: [
          {
            required: true,
            message: "昵称不能为空",
            trigger: "blur",
          },
          {
            min: 4,
            max: 10,
            message: "昵称必须在4到10位 ",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
          {
            min: 5,
            max: 15,
            message: "密码必须在5到15位 ",
            trigger: "blur",
          },
        ],
      },
      //用户协议
      checked5: false,
      //用于判断注册方式
      isPhone: true,
      //禁用防止重复提交
      isDisabled: false,
    };
  },
  methods: {
    /**
     * 切换注册方式
     */

    //切换手机注册
    changeToPhone() {
      if (!this.isPhone) {
        this.isPhone = true;
      }
    },
    //切换邮箱注册
    changeToEmail() {
      if (this.isPhone) {
        this.isPhone = false;
      }
    },

    /**
     * 注册方法
     */

    submit() {
      // 检查是否已阅读并接受用户协议
      if (this.checked5 == false) {
        ElMessage.warning("请先阅读并接受用户协议");
        return;
      } else {
        // 检查两次输入的密码是否一致

        if (this.pwdPhone != this.userByPhone.password && this.isPhone) {
          ElMessage.error("两次密码不一致");
          return;
        }
        if (this.pwdEmail != this.userByEmail.password && !this.isPhone) {
          ElMessage.error("两次密码不一致");
          return;
        }

        // 手机号注册逻辑
        if (this.isPhone) {
          // 检查手机号格式是否正确

          if (!this.userByPhone.phone.match(/^1[3456789]\d{9}$/)) {
            ElMessage.error("手机号格式不正确");
            return;
          }
          // 设置用户名并注册
          this.userByPhone.username = "user_" + this.userByPhone.phone;
          register(this.userByPhone)
            .then((res) => {
              if (res.data.code != 0) {
                ElMessage.error(res.data.message);
                return;
              }
              ElMessage.success("手机号注册成功");
              ElNotification({
                title: "信息",
                message:
                  "您的用户名为：" +
                  this.userByPhone.username +
                  "，请您牢记用户名",
                type: "success",
                duration: 10000,
              });
              this.$router.push("/login");
            })
            .catch(() => {
              ElMessage.error("手机号已被注册!请使用其他手机号注册！");
            });
        } else {
          // 邮箱注册逻辑
          // 检查邮箱格式是否正确
          if (
            !this.userByEmail.email.match(
              /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            )
          ) {
            ElMessage.error("邮箱格式不正确");
            return;
          }
          // 设置用户名并注册
          this.userByEmail.username = "user_" + this.userByEmail.email;
          register(this.userByEmail)
            .then((res) => {
              if (res.data.code == 1) {
                ElMessage.error(res.data.message);
                return;
              }
              ElMessage.success("邮箱注册成功");
              ElNotification({
                title: "信息",
                message:
                  "您的用户名为：" +
                  this.userByEmail.username +
                  "，请您牢记用户名",
                type: "success",
                duration: 10000,
              });
              this.$router.push("/login");
            })
            .catch(() => {
              ElMessage.error("邮箱已被注册!请使用其他邮箱注册！");
            });
        }
      }
    },
    //注册前确认
    submitCheck() {
      ElMessageBox.confirm("请仔细确认您的信息是否正确", "提醒", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.isDisabled = true;
          this.submit();
          this.isDisabled = false;
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "请仔细修改",
          });
        });
    },
  },
};
</script>
  
  <style scoped>
@charset "utf-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: 0;
  max-height: 100%;
  max-width: 100%;
}
body {
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  font-size: 12px;
  font-family: "微软雅黑";
  color: #222;
  background: #fff4f0;
}
.clear {
  clear: both;
}
input {
  border: 0;
  outline: 0;
}

.header {
  height: 85px;
  width: 100%;
  background: #fff;
  border-bottom: #fee7b1 1px solid;
}
.mainwarp {
  width: 1000px;
  margin: 0 auto;
}
.header .logo {
  float: left;
  margin-top: 20px;
}
.header .welcome {
  float: left;
  margin-top: 20px;
  height: 40px;
  border-left: 1px solid #f4f4f4;
  padding-left: 15px;
  margin-left: 10px;
  line-height: 40px;
  font-size: 22px;
  color: #5c5c5c;
}
.header .headerright {
  float: right;
  font-size: 14px;
  margin-top: 20px;
  padding-top: 15px;
}
.header .headerright a {
  color: #343434;
}
.header .headerright span {
  color: #dadada;
  margin-left: 10px;
  margin-right: 10px;
}

.content {
  width: 1000px;
  margin: 40px auto;
  background: #fff;
  border: 1px #fee7b5 solid;
  margin-top: 50px;
  height: 500px;
  margin-top: 20px;
}
.logtype {
  float: right;
  width: 53px;
  height: 53px;
  cursor: pointer;
}
.logtype.on {
  background: url(@/assets/images/log2.png) no-repeat;
}

.logoDiv .logoLeft {
  float: left;
  width: 636px;
}
.logoDiv .logoLeft .leftimg {
  width: 601px;
  margin: 0 auto;
}
.logoDiv .logoLeft .leftcon {
  text-align: center;
  color: #838385;
  margin-top: 10px;
}
.logoDiv .logoLeft .leftcon a {
  display: inline-block;
  color: #838385;
  padding-left: 20px;
  margin-left: 20px;
  height: 18px;
}
.logoDiv .logoLeft .leftcon a.a1 {
  background: url(@/assets/images/log3.png) no-repeat;
}
.logoDiv .logoLeft .leftcon a.a2 {
  background: url(@/assets/images/log4.png) no-repeat;
}
.logoDiv .logoLeft .leftcon a.a3 {
  background: url(@/assets/images/log5.png) no-repeat;
}
.logoDiv .logoRight {
  float: left;
  width: 363px;
  border-left: 1px solid #e8e8e8;
  height: 365px;
}

.normalLogin {
  width: 288px;
  margin: 0 auto;
}
.normalLogin .username {
  background: url(@/assets/images/log6.png) no-repeat;
  height: 42px;
  margin-top: 5px;
}
.normalLogin .username span {
  background: url(@/assets/images/log7.png) no-repeat;
  width: 51px;
  height: 40px;
  float: left;
  margin-top: 1px;
}
.normalLogin .username input {
  float: left;
  background: none;
  width: 226px;
  margin-top: 1px;
  color: #757776;
  font-size: 14px;
  padding-left: 10px;
  line-height: 40px;
  height: 40px;
}
.normalLogin .password {
  background: url(@/assets/images/log6.png) no-repeat;
  height: 42px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.normalLogin .password span {
  background: url(@/assets/images/log8.png) no-repeat;
  width: 51px;
  height: 40px;
  float: left;
  margin-top: 1px;
}
.normalLogin .password input {
  float: left;
  background: none;
  width: 226px;
  margin-top: 1px;
  color: #757776;
  font-size: 14px;
  padding-left: 10px;
  line-height: 40px;
  height: 40px;
}
.normalLogin .autoLogo {
  font-size: 14px;
  margin-top: 10px;
}
.CheckBox {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  background: url(@/assets/images/log11.png) no-repeat;
}
.CheckBox:hover {
  background: url(@/assets/images/log10.png) no-repeat;
}
.CheckBox.Yes {
  background: url(@/assets/images/log9.png) no-repeat;
}
.normalLogin .autoLogo span {
  vertical-align: middle;
  font-size: 12px;
  padding-right: 5px;
}
.normalLogin .autoLogo span a {
  color: #0f72a4;
}
.normalLogin .autoLogo a.pasd {
  float: right;
  color: #0485c7;
  vertical-align: middle;
  font-size: 14px;
}
.normalLogin .logobtn {
  margin-top: 10px;
  width: 288px;
  height: 42px;
  background: #ff7a4d;
  font-size: 20px;
  border-radius: 4px;
  line-height: 42px;
  text-align: center;
}
.normalLogin .logobtn a {
  display: block;
  color: #fff;
}
.zcbtn {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}
.zcbtn a {
  display: block;
  color: #9b9b9b;
}
.thirdLogin {
  color: #676767;
  margin-top: 15px;
  font-size: 14px;
}

/*用户协议*/
.registerMain {
  font-size: 12px;
  line-height: 24px;
  background-color: #f9eedd;
  padding: 20px;
  border: 1px dashed #fe6b07;
  width: 700px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1px;
}
.registerMain h1 {
  color: #ff3300;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 10px;
}
.registerMain span {
  font-weight: bold;
  color: #ff3300;
  margin-left: 20px;
}
.registerMain .con {
  margin-right: 20px;
  margin-left: 40px;
}

/*注册*/
.zhuceBox {
  width: 880px;
  margin: 0 auto;
  background: #fff;
  height: 459px;
  border: 1px solid #fee7b1;
  margin-top: 25px;
  margin-bottom: 50px;
  font-family: "微软雅黑";
}
.zhuceBox .zcLeft {
  float: left;
  width: 547px;
  border-right: 1px solid #ccc;
  height: 100%;
}

.zhuceBox .zcLeft ul#tabzc li {
  background: #f0f0f0;
  float: left;
  width: 273px;
  height: 52px;
  line-height: 52px;
  cursor: pointer;
  color: #353535;
  text-align: center;
  font-size: 16px;
  border-left: 1px solid #d4d4d4;
}
.zhuceBox .zcLeft ul#tabzc li:first-child {
  border-left: 0;
}
.zhuceBox .zcLeft ul#tabzc li.currentzc {
  cursor: inherit;
  background: #fff;
}

.zhuceBox .zcLeft #contentzc .zcpart1 {
  background: url(@/assets/images/log23.png) no-repeat;
  width: 272px;
  height: 37px;
  margin: 20px auto 0px auto;
}
.zhuceBox .zcLeft #contentzc .zcpart2 {
  width: 272px;
  margin: 30px 0px 0px 160px;
}
.zcpart2_l {
  float: left;
}
.zcpart2_l img {
  border: 1px solid rgb(234, 234, 234);
}
.zcpart2_r {
  float: left;
}
.zcpart2_r img {
  margin-top: 35px;
}
.zcpart2_c {
  margin-top: 20px;
  font-size: 12px;
  font-family: "宋体";
}
.zcpart2_c a {
  color: #0f72a4;
}
.zhuceBox .zcLeft #contentzc ul {
  display: none;
}
.zhuceBox .zcLeft #contentzc .zcpart3 {
  width: 265px;
  height: 20px;
  margin: 30px auto 0px auto;
}
.zhuceBox .zcLeft #contentzc .zcpart3 .zcstep {
  display: inline-block;
  width: 35px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #e7e7e7;
}
.zhuceBox .zcLeft #contentzc .zcpart3 .zcstepGo {
  background: url(@/assets/images/log25.png) 5px center no-repeat;
  display: inline-block;
  width: 12px;
  height: 20px;
  vertical-align: middle;
}
.zhuceBox .zcLeft #contentzc .zcpart3 .zcstepLast {
  display: inline-block;
  width: 85px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #e7e7e7;
}
.zhuceBox .zcLeft #contentzc .zcpart4 {
  width: 285px;
  margin: 20px auto;
}
.zhuceBox .zcLeft #contentzc .zcpart0 {
  margin-left: 105px;
}
.zhuceBox .zcLeft #contentzc .zcpart5 {
  margin-top: 25px;
  background: url(@/assets/images/log6.png) no-repeat;
  height: 42px;
  margin-top: 35px;
  margin-bottom: 5px;
}
.zhuceBox .zcLeft #contentzc .zcpart5 span {
  background: url(@/assets/images/log7.png) no-repeat;
  width: 51px;
  height: 40px;
  float: left;
  margin-top: 1px;
}
.zhuceBox .zcLeft #contentzc .zcpart5 input {
  float: left;
  background: none;
  width: 226px;
  margin-top: 1px;
  color: #757776;
  font-size: 14px;
  padding-left: 10px;
  line-height: 40px;
  height: 40px;
}
.zhuceBox .zcLeft #contentzc .zcpart6 {
  margin-left: 55px;
  padding-left: 20px;
  display: block;
  background: url(@/assets/images/log26.png) no-repeat;
  display: inline-block;
  line-height: 16px;
  color: #757776;
  height: 20px;
}
.zhuceBox .zcLeft #contentzc .zcpart7 {
  margin-top: 25px;
  background: url(@/assets/images/log6.png) no-repeat;
  height: 42px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.zhuceBox .zcLeft #contentzc .zcpart7 span {
  background: url(@/assets/images/log27.png) no-repeat;
  width: 51px;
  height: 40px;
  float: left;
  margin-top: 1px;
}
.zhuceBox .zcLeft #contentzc .zcpart7 input {
  float: left;
  background: none;
  width: 226px;
  margin-top: 1px;
  color: #757776;
  font-size: 14px;
  padding-left: 10px;
  line-height: 40px;
  height: 40px;
}
.zcpart8 {
  margin-top: 10px;
  width: 333px;
  height: 42px;
  background: #ff7a4d;
  font-size: 18px;
  font-family: "微软雅黑";
  border-radius: 4px;
  line-height: 42px;
  text-align: center;
}
.zcpart8 a {
  display: block;
  color: #fff;
}
.zcpart8.zcpart9 {
  background: #fff;
  border: 1px solid #dfdfdf;
  font-size: 15px;
}
.zcpart9 a {
  display: block;
  color: #757776;
}
.zhuceBox .zcRight {
  float: left;
  background: url(@/assets/images/log22.png) no-repeat;
  width: 330px;
  text-align: center;
  height: 100%;
}
.zhuceBox .zcRight .topdiv {
  height: 116px;
  padding-top: 50px;
  font-family: 微软雅黑;
}
.zhuceBox .zcRight .topdiv .noPa {
  font-size: 18px;
  color: #000;
}
.zhuceBox .zcRight .topdiv a {
  width: 150px;
  height: 40px;
  background: #fa6d01;
  display: inline-block;
  line-height: 40px;
  font-size: 16px;
  border-radius: 5px;
  margin-top: 20px;
  color: #fff;
}

/* 如果需要，您还可以在这里添加额外的 scoped 样式 */
.container {
  font-family: Arial, sans-serif;
}

/* 新增 */
.checkbox-container {
  display: flex;
  align-items: center;
  gap: 10px; /* 设置元素之间的间距 */
}

.custom-checkbox .el-checkbox__label {
  font-size: 14px; /* 调整字体大小 */
  color: #333; /* 调整字体颜色 */
}

.user-agreement {
  text-decoration: none; /* 移除下划线 */
  color: #007bff; /* 设置链接颜色 */
}

.user-agreement:hover {
  text-decoration: underline; /* 添加悬停效果 */
}

.forgot-password {
  text-decoration: none; /* 移除下划线 */
  color: #dc3545; /* 设置链接颜色 */
  margin-left: 10px; /* 增加左边距 */
}

.forgot-password:hover {
  text-decoration: underline; /* 添加悬停效果 */
}

.forgot-password-wrapper {
  margin-left: auto; /* 使“忘记密码？”链接右对齐 */
}
/* 新增 注册*/
.zcbtn {
  text-align: center;
  margin-top: 30px;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #dfdfdf;
  border-radius: 4px;
}

.zcbtn a {
  display: block;
  color: #9b9b9b; /* 默认颜色 */
  text-decoration: none; /* 移除下划线 */
}

.zcbtn a:hover {
  color: #ff7a4d; /* 鼠标悬停时的高亮颜色 */
  text-decoration: underline; /* 添加下划线 */
}
/*新增 返回首页和登录 */
.login-btn {
  display: block;
  width: 100%;
  height: 42px;
  background: #ff7a4d; /* 登录按钮背景色 */
  font-size: 20px;
  border-radius: 4px;
  line-height: 42px;
  text-align: center;
  color: #fff; /* 登录按钮文字颜色 */
  text-decoration: none; /* 移除下划线 */
}

.login-btn:hover {
  background: #ffcc99; /* 鼠标悬停时的背景色 */
  color: #ff6633; /* 鼠标悬停时的文字颜色 */
  text-decoration: none; /* 移除下划线，可以使用其他效果如加粗或边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* 返回首页路由链接悬停效果 */
.header-link {
  color: #343434; /* 默认颜色 */
  text-decoration: none; /* 移除下划线 */
}

.header-link:hover {
  color: #ff7a4d; /* 鼠标悬停时的高亮颜色 */
  text-decoration: underline; /* 添加下划线 */
}
</style>